<template>
    <div class="search-box">
        <search-item 
            label="行业分类：" 
            v-model="model.tagtype" 
            :data="majorlist" 
            @click="majorAfterQuery"
            :props="{label: 'dicname',value: 'dicname'}"
        ></search-item>

        <search-item 
            label="选择省级：" 
            v-model="provinId" 
            :data="provinces" 
            :props="{label: 'valuename',value: 'valueid'}"
            @click="provinChange"
        ></search-item>

<!-- v-model="model.location"  -->
        <search-item 
            label="选择地市：" 
            v-model="cityId" 
            :data="cityListByProvinceSel || cities" 
            :props="{label: 'valuename',value: 'valueid'}"
            @click="cityChange"
        ></search-item>

        <search-item 
            label="项目金额：" 
            v-model="model.range" 
            :data="amountlist" 
            @input="searchHandler" 
            @click="amountChange"
        ></search-item>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import SearchItem from './search-item.vue';

export default {
    props: {
        majorlist: {
            type: Array,
            default: () => {
                [];
            },
        },
        value: {
            type: Object,
            default: () => {},
        },
    },
    components: { SearchItem },
    data() {
        return {
            cityListByProvinceSel: null,
            
            provinId: '',
            cityId: '',

            amountlist: [
                { dicname: '0-100万', diccode: '1' },
                { dicname: '100-200万', diccode: '2' },
                { dicname: '200-300万', diccode: '3' },
                { dicname: '300-500万', diccode: '4' },
                { dicname: '500万+', diccode: '5' },
            ],
        };
    },
    computed: {
        ...mapGetters({
            provinces: 'city/getProvinces',
            cities: "city/getCities",
        }),
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    methods: {
        ...mapActions({
            queryWeather: 'city/queryWeather',
        }),
        searchHandler(){
            this.$emit('search');
        },
        provinChange(item, index) {
            var {valueid} = item;

            if(item.valuename === '全部'){
                this.cityListByProvinceSel = [];
            } else {
               this.cityListByProvinceSel = this.$store.getters['city/getCitiesByProvinceCode'](valueid);
            }

            this.model.location = valueid;
            this.model.level = '1';
            this.cityId = '';

            this.setCzc(['投标方案库', '筛选', '地市省份', index, 'document-select-provin']);

            this.searchHandler();
        },

        cityChange(item, index) {
            if(item.valuename === '全部'){
                this.model.level = '1';
                this.cityId = '';
                this.model.location = this.provinId;
            } else {
                this.model.level = '2';
                this.model.location = this.cityId;
            }
            
            this.setCzc(['投标方案库', '筛选', '地市城市', index, 'document-select-city']);

            this.searchHandler();
        },

        majorAfterQuery(item, index) {
            let tagids = [];
            let exttagids = [];

            if(item.dicname == '全部') {
                this.model.tagids = '';
                this.model.exttagids = '';
            } else{
                item.children.forEach( pro => {
                    if(!pro.detail){
                        tagids.push(pro.diccode);
                    } else {
                        exttagids.push(pro.diccode);
                    }
                });
                
                this.model.tagids = tagids.join(',');
                this.model.exttagids = exttagids.join(',');
            }
            
            this.setCzc(['投标方案库', '筛选', '选择行业', index, 'document-select-major']);

            this.searchHandler();
        },
        amountChange(item, index) {
            this.setCzc(['投标方案库', '筛选', '项目金额', index, 'document-select-amount']);

            this.searchHandler();
        },
    },
    mounted() {
        this.queryWeather();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.search-box {
    margin-top: 14px;
}
</style>
